<template>
	<view class="chat_window" :style="{'paddingBottom': device == 'MP-WEIXIN' ? (sendHeight - 44 + 'px') : sendHeight + 'px'}">		
		<view class="chat_list" @click="hideToolsBar">
			<view class="chat_item" v-for="item in chatList" :key="item.id">
				<view class="oneself" v-if="item.isself > 0">
					<img class="avatar" :src="item.sender_avatar || errorAvatar" alt="" @error="tabErrorPicture(item.id)" />
					<view class="chat_content">
						<view class="time">{{item.send_time}}</view>
						<view class="message">
							<view v-if="item.content" class="desc" v-html="item.content"></view>
							<img v-if="item.uploadPicture" class="picture" :src="item.uploadPicture" />
						</view>
					</view>
				</view>
				<view class="customer" v-else>
					<img class="avatar" :src="item.sender_avatar || errorAvatar" alt="" @error="tabErrorPicture(item.id)" />
					<view class="chat_content">
						<view class="time">{{item.send_time}}</view>
						<view class="message">
							<view v-if="item.content" class="desc" v-html="item.content"></view>
							<img v-if="item.uploadPicture" class="picture" :src="item.uploadPicture" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="chat_footer" :style="{'height': sendHeight + 'px' }">
			<view class="chat_enter">
				<div class="chat_message" v-if="message">{{ message }}</div>
				<u--input border="surround" v-model="message" maxlength="200" @focus="enterChange"></u--input>
				<view class="send">
					<u-button class="btn" text="发送" @click="sendMessage"></u-button>
					<u-icon size="30" name="plus-circle" @click="showToolsBar"></u-icon>
				</view>
			</view>
			<view class="tools_wrap" v-if="visibleToolbar">
				<view class="tools_item" @click="uploadFile">
					<u-icon size="40" name="photo"></u-icon>
					<text class="word">图片</text>
				</view>
				<view class="tools_item" @click="GotoProductDetail">
					<u-icon size="40" name="bag"></u-icon>
					<text class="word">商品详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getChatDetail,api_sendChatContent } from '@/api/api'
	import config from '@/utils/config.js'
	import uploadFileAliOSS from '@/utils/aliyunoss/uploadAliyun.js'
	import * as type from '../../utils/device'
	export default {	
		data() {
			return {
				chatList: [],
				total: 0,
				shopname: uni.getStorageSync('domainname'),
				userInfo: uni.getStorageSync('userInfo'),
				errorAvatar: require('@/static/img/avatar.png'), 
				id: null,
				message: '',
				visibleToolbar: false,
				sendHeight: 50,
			}
		},
		onLoad(options) {
			this.init(options);
		},
		computed: {
			device(){
				return type.default;
			},
		},
		methods: {
			init(opts){	// 页面初始化
				this.id = opts.orderid;	
				this.getChatList();
			},
			getChatList(){	// 获取聊天列表				
				api_getChatDetail({orderid: this.id}).then(res => {
					let { code,data: {chatdata,total},msg } = res;					
					if (code == 1) {
						this.chatList = chatdata.reverse();
						this.total = total;
					} else {
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {					
					console.log(err);
				})
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.chatList.findIndex(v => v.id == id);
				this.chatList[i].sender_avatar = this.errorAvatar;		
			},
			enterChange(){	// 输入框focus
				console.log('focus');
				this.visibleToolbar = false;
				this.sendHeight = 300;
			},
			hideToolsBar(){	// 显示工具栏
				this.visibleToolbar = false;
				this.sendHeight = 50;
			},
			sendMessage(){	//	发送
				let curDate = this.MonentTime();
				if (this.message) {
					let query = { orderid: this.id,content: this.message,isself: 1 }
					api_sendChatContent(query).then(res => {
						if (res.code == 1) {
							this.getChatList();
						} else {
							uni.showToast({ title: res.msg,icon: 'error' });
						}
					}).catch(err => console.log(err));
					this.message = '';
					this.visibleToolbar = false;
					this.sendHeight = 50;
				} else {
					uni.showToast({	title: '请输入内容',icon: 'error' });
				}				
			},
			MonentTime(){	// 日期格式转换
				let oDate = new Date();
				let [ YY,MM,DD,HH,Min,Sec ] = [
					oDate.getFullYear(),
					oDate.getMonth() + 1,
					oDate.getDate(),
					oDate.getHours(),
					oDate.getMinutes(),
					oDate.getSeconds()
				];
				return YY +'-'+ MM +'-'+ DD +' '+ HH +':'+ Min +':'+ Sec;
			},
			showToolsBar(){	// 显示工具栏
				this.visibleToolbar = true;
				this.sendHeight = 300;				
			},
			uploadFile(){	// 上传图片
				let thisVM = this;
				uni.chooseImage({
					success: (res) => {
						// console.log('upload',res);
						let tempFiles = res.tempFiles[0]
						let path = 'image/avatar/' + thisVM.userInfo.phone + '/' + thisVM.shopname + '/' + tempFiles.name;
						uploadFileAliOSS(tempFiles,path).then(res => {
							let query = { orderid: this.id,image: `<img src=${res} alt="" />`,isself: 1 };
							api_sendChatContent(query).then(res => {
								if (res.code == 1) {
									this.getChatList();
								} else {
									uni.showToast({ title: res.msg,icon: 'error' });
								}
							}).catch(err => console.log(err));
							thisVM.visibleToolbar = false;
							thisVM.sendHeight = 50;			
						});
							
						
						
					}					
				})
			},
			GotoProductDetail(){	// 商品详情
				this.visibleToolbar = false;
				this.sendHeight = 50;
				uni.navigateTo({ url: `/pages/product/index?id=${this.id}` });
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.chat_window{
	height: calc(100vh - 44px);
	background-color: #f1f1f3;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	.chat_list{
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		overflow-y: auto;
		.oneself{
			position: relative;
			margin: 20px 0 0 0;
			padding: 0 50px 0 0;
			text-align: right;
			.avatar{
				position: absolute;
				right: 0;
				top: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				margin: 0;
			}
			.chat_content{
				width: 100%;
				.time{
					margin: 0 0 10px 0;
					font-size: 12px;
					color: #999;
					transform: translate(0,-12px);
				}
				.message{	
					transform: translate(0,-16px);		
					overflow: hidden;
					.desc{
						display: inline-block;
						max-width: 100%;
						font-size: 13px;	
						text-align: left;
						word-break: break-all;
						word-wrap: break-word;
						background-color: #fff;
						padding: 5px;
						border-radius: 3px;
						box-sizing: border-box;
						::v-deep img{
							display: block;
							max-width: 100%;
							max-height: 200px;
							margin: 0;
						}
					}
					.picture{
						display: block;
						width: 150px;
					}
				}
			}
		}
		.customer{
			margin: 20px 0 0 0;
			padding: 0 0 0 50px;
			position: relative;
			.avatar{
				position: absolute;
				left: 0;
				top: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				margin: 0;
			}
			.chat_content{
				.time{
					margin: 0 0 10px 0;
					font-size: 12px;
					color: #999;
					transform: translate(0,-12px);
				}
				.message{
					transform: translate(0,-16px);		
					overflow: hidden;
					.desc{
						display: inline-block;
						max-width: 100%;
						font-size: 13px;	
						text-align: left;
						word-break: break-all;
						word-wrap: break-word;
						background-color: #fff;
						padding: 5px;
						border-radius: 3px;
						box-sizing: border-box;
						::v-deep img{
							display: block;
							max-width: 100%;
							max-height: 200px;
							margin: 0;
						}
					}
					.picture{
						display: block;
						width: 150px;
					}
				}
			}
		}
	}
	.chat_footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		.chat_enter{
			width: 100%;
			padding: 5px;
			display: flex;
			background-color: #fff;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			.chat_message{
				width: 90%;
				height: auto;
				word-wrap: break-word;
				white-space: wrap;
				padding: 5px;
				border-radius: 4px;
				background-color: #fff;	
				box-shadow: 0 5px 8px rgba(0,0,0,.15);
				position: absolute;
				left: 5px;
				bottom: 60px;
				&::after{
					content: '';
					border-top: 10px solid #fff;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;					
					position: absolute;
					left: 50px;
					bottom: -8px;
				}
			}
			.send{
				display: flex;
				padding: 0 10px 0 4px;				
				::v-deep .u-button{
					margin: 0 10px 0 0;
					background-color: #f59e01;
					border-color: #f59e01;
					color: #fff;
				}				
			}
		}
		.tools_wrap{
			padding: 10px;
			background-color: #f1f1f3;
			height: calc(100% - 50px);
			overflow: hidden;
			.tools_item{
				float: left;
				min-width: 60px;
				text-align: center;
				margin: 0 10px 10px 0;
				::v-deep .u-icon{
					display: flex;
					width: 50px;
					height: 50px;
					background-color: #fff;					
					align-items: center;
					justify-content: center !important;
					margin: 0 auto 5px;					
				}
				.word{
					font-size: 13px;
				}
			}
		}
	}
}
</style>
